import { View, Text } from '@tarojs/components'
import { Button } from '@nutui/nutui-react-taro'
import React from 'react'
import './index.less'

export interface EmptyStateProps {
  /** 空状态图标 */
  icon?: React.ReactNode | string
  /** 标题 */
  title: string
  /** 描述文字 */
  description?: string
  /** 按钮文字 */
  buttonText?: string
  /** 按钮点击事件 */
  onButtonClick?: () => void
  /** 按钮类型 */
  buttonType?: 'primary' | 'default' | 'success' | 'warning' | 'danger'
  /** 自定义类名 */
  className?: string
}

/**
 * EmptyState 空状态组件
 * 用于展示空列表、空数据等场景
 */
const EmptyState: React.FC<EmptyStateProps> = ({
  icon,
  title,
  description,
  buttonText,
  onButtonClick,
  buttonType = 'primary',
  className = '',
}) => {
  return (
    <View className={`empty-state ${className}`}>
      <View className='empty-icon'>
        {typeof icon === 'string' ? <Text className='icon-text'>{icon}</Text> : icon}
      </View>
      <Text className='empty-title'>{title}</Text>
      {description && <Text className='empty-desc'>{description}</Text>}
      {buttonText && onButtonClick && (
        <Button type={buttonType} className='empty-button' onClick={onButtonClick}>
          {buttonText}
        </Button>
      )}
    </View>
  )
}

export default EmptyState

